<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8" />
    <meta name=”viewport” content=”width=device-width, initial-scale=1″ />
    <link rel="stylesheet" href="./js/KaTeX/katex.min.css" />
    <script src="./js/KaTeX/katex.min.js"></script>

    <style>
        *{
            margin : 0;
            padding : 0;
        }

        body {
            color: #444444;
        }

        .list li {
            word-break : break-all;
            word-wrap: break-word;
            box-sizing: border-box;
            border-radius:5px;
            margin: 5px 5px;
        }

        .base span {
            float: left;
        }

        #history ul {
             list-style:none;
             -webkit-margin-before: -0.1em;
             font-size : 175%;
        }

        .hide-block {
            display  : none;
        }

    </style>
</head>
<body>

<div id="history" class = "list history">
    <ul id="list"></ul>
</div>

<script  type="text/javascript">
        disColort = "rgba(8,8,8,0.05)";

        function replaceMultiply(expr) {
            return expr.replace(new RegExp(/\∗/g), "×").replace(new RegExp(/>\/</g), ">÷<");
        }

        function clearHistory() {
            var list = document.getElementById("list");
            list.innerHTML = "";
        }

        function historyPop() {
            var list = document.getElementById("list");
            if(list.childNodes != null && list.childNodes.length > 0) {
                list.removeChild(list.childNodes[0]);
            }
        }

        function addItem(item) {
            var li = document.createElement("li");
            li.innerHTML = replaceMultiply(katex.renderToString(item));

            //删除多余的标签，防止复制操作得到重复的数据
            var span = li.childNodes[0];
            span.removeChild(span.childNodes[0]);

            var list = document.getElementById("list");
            if(list.childNodes == null || list.childNodes.length == 0) {
                list.appendChild(li);
            } else {
                if(list.childNodes.length % 2 == 1) {
                    li.style.backgroundColor = disColort;
                }
                list.insertBefore(li, list.childNodes[0]);
            }
        }

        function setTextColor(color) {
            var body = document.body;
            body.style.color = color;
        }

        function setDistinguishColor(color) {
            disColort = color;
            var list = document.getElementById("list");
            if(list.childNodes != null && list.childNodes.length != 0) {
                for(var i=0;i<list.childNodes.length;i++) {
                    if(i % 2 == 1) {
                        var c = list.childNodes[i];
                        c.style.backgroundColor = disColort;
                    }
                }
            }
        }

        /*
        //仅用于测试的代码
        addItem("1 + 2 + 3 + 4 + 4 + 5 + 6 + 7 + 8 + 9 + 10 = 55");
        */
</script>

</body>
</html>